<template>
	<view class="pageMap">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map v-if="bool" style="width: 100vw; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
				<view>
					<navigator url="" class="map_back">
						<image src="../../static/icons/zjc/button_map_back@2x.png" mode="" class="back_image">
						</image>
					</navigator>
				</view>
				<view class="back">
					<image src="../../static/icons/zjc/button_map_back@2x.png" mode="" @tap="goBack"></image>
				</view>
				<view class="refresh">
					<image src="../../static/icons/zjc/button_map_refresh@2x.png" mode="" @tap="goBack"></image>
				</view>
				<view class="checked_store">
					<image src="" mode="" class="store_image"></image>
					<view class="store_info">
						<view class="info">
							<view class="name">
								赤兔养车工厂店(成都盛源店)
							</view>
							<view class="address">
								天府新区盛源街
							</view>
							<view class="detail" style="display: flex;">
								<view>1.6km</view>
								<view>5星</view>
								<navigator>
									<view>查看详情</view>
								</navigator>
							</view>
						</view>
						<image class="btn" src="../../static/icons/zjc/button_map_btn@2x.png">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 30.574277,
				longitude: 104.061473,
				bool:true,
			}
		},
		onLoad() {
			this.getCurrentAddress();
		},
		methods: {
			goBack(){
				this.bool  =  !this.bool;
				setTimeout(()=>{
					this.bool =  !this.bool;
				});
			},
			//获取当前位置
			getCurrentAddress() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					}
				});
			}
		},
		computed: {
			covers() {
				return [{
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '/static/icons/zjc/icon_map_my_coo@2x.png',
					width: 50,
					height: 60,
					title:"当前位置"
				}, ]
			}
		}
	}
</script>

<style>
	.refresh {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		bottom: 182rpx;
		right: 20rpx;
	}

	.refresh image {
		width: 100%;
		height: 100%;
	}

	.back {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		bottom: 254rpx;
		right: 20rpx;
	}

	.back image {
		width: 100%;
		height: 100%;
	}

	.checked_store {
		display: flex;
		justify-content: space-between;
		width: 688rpx;
		height: 152rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx #a9a9a9;
		border-radius: 20rpx;
		position: absolute;
		bottom: 24rpx;
		left: 32rpx;
		right: 30rpx;
		box-sizing: border-box;
		padding: 20rpx 60rpx 20rpx 40rpx;
	}

	.checked_store .store_info {
		display: flex;
		justify-content: space-between;
	}

	.checked_store .store_image {
		width: 112rpx;
		height: 112rpx;
		background-color: #007AFF;
	}

	.store_info .info .name {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #383838;
	}

	.info .address {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #484848;
	}

	.info .detail view {
		border-radius: 6rpx;
		border: solid 2rpx #f00a0a;
		font-size: 20rpx;
		line-height: 28rpx;
		color: #f00a0a;
		margin-right: 8rpx;
		padding: 2rpx 12rpx;
	}

	.store_info .btn {
		width: 80rpx;
		height: 80rpx;
		margin-top: 24rpx;

	}

	.map_back {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 54rpx;
		left: 54rpx;
	}

	.map_back .back_image {
		width: 100%;
		height: 100%;
	}
</style>
